<template>
    <div class="detail-complete">
         <div @click="leftBtn" class="arrow-left">
          <img src="../../images/jiantou.png" alt="">
        </div>
        <div class="detail-header">
            <!-- <img src='../../images/dingdan_bg@2x.png' alt="" class="dingdan-bg" v-if="completed">
             <img src='../../images/bg_cart.jpg' alt="" class="dingdan-bg" v-else> -->

            <div v-if="detail.actionOrderStatus == 'WAIT_GET'||detail.actionOrderStatus == 'WAIT_SEND'||detail.actionOrderStatus == 'EVALUATION'||detail.actionOrderStatus == 'EVALUATION'" class="successword" >订单支付成功 </div>
            <div class="detail-addr">
                <img src="../../images/adresBg.png" alt="">
                <div class="detail-addr-container">
                    <div class="text-two">
                        <div class="text-name">{{detail.contactName}}</div>
                        <div class="text-number">{{detail.telNumber}}</div>
                    </div>
                      <div class="text-addr">{{detail.address}}{{detail.detailedAddress}}</div>
                </div>
            </div>
        </div>
        <div class="detail-body">
            <div class="code-complete">
                <div class="code-complete-left">订单号：{{detail.orderCode}}</div>
                <div class="code-complete-right">{{hdItems.filter( item => {return item.value.indexOf(detail.actionOrderStatus) != -1}).length ? hdItems.filter( item => {return item.value.indexOf(detail.actionOrderStatus) != -1})[0].label : ''}}</div>
            </div>
            <div>
                <div class="detail-good"  >
                    <img :src="detail.productImageUrl" alt="">
                    <div class="detail-good-right flex">
                        <div class="right-text1">{{detail.productTitle}}</div>
                        <div class="flex-box-align" style="margin-bottom: .5rem;">
                            <div class="right-text2 flex">{{detail.modelName}}   {{detail.modelSize}}</div>
                            <div class="good-refund" v-if="auditStatusList.filter(item1 => {return item1.value == detail.refundStatus}).length">
                                {{auditStatusList.filter(item1 => {return item1.value == detail.refundStatus})[0].label}}
                            </div>
                        </div>
                        <div class="right-text3">
                            <div class="text3_1"> 金额：{{detail.price}}</div>
                            <div class="text3_2"><span>x</span> {{detail.count}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-message">
             <!-- <div v-if="detail.supplier" class="detail-message-item">
                <div class="panel-left">供应商</div>
                <div class="panel2-right">{{detail.supplier}}</div>
            </div> -->
             <div class="detail-message-item">
                <div class="panel-left">下单时间</div>
                <div class="panel2-right">{{detail.gmtCreated}}</div>
            </div>
           <div class="detail-message-item">
                <div class="panel-left">套餐有效期</div>
                <div class="panel2-right">{{detail.endTime}}</div>
            </div>
            <div class="detail-message-item">
                <div class="panel-left">买家留言</div>
                <div class="panel2-right">{{detail.memo}}</div>
            </div>
        </div>
         <div v-if="detail.actionOrderStatus != 'WAIT_SEND'||detail.actionOrderStatus != 'WAIT_PAY'||detail.actionOrderStatus != 'CANCEL_TIMEOUT'" class="detail-message">
            <div v-for="(item,index) in detail.logisticsDTOList" :key="index">
                <div class="detail-message-item">
                    <div class="panel-left">物流公司</div>
                    <div class="panel2-right">{{item.logisticsCompany}}</div>
                </div>
                <div class="detail-message-item">
                    <div class="panel-left">物流单号</div>
                    <div class="panel2-right">{{item.logistics}}</div>
                </div>
                <div class="detail-message-item">
                    <div class="panel-left">备注</div>
                    <div class="panel2-right">{{item.remark}}</div>
                </div>
                <div class="detail-message-item">
                    <div class="panel-left"></div>
                    <div class="panel2-right">
                        <div class="btn-c" @click="checkLog(item.logisticsCompany,item.logistics)">查看物流</div>
                    </div>
                </div>
            </div>
        </div>
         <!-- <div v-if="detail.actionOrderStatus != 'WAIT_SEND'||detail.actionOrderStatus != 'WAIT_PAY'||detail.actionOrderStatus != 'CANCEL_TIMEOUT'" class="detail-message">
            <div class="detail-message-item">
                <div class="panel-left">物流公司</div>
                <div class="panel2-right">{{detail.logisticsCompany}}</div>
            </div>
             <div class="detail-message-item">
                <div class="panel-left">物流单号</div>
                <div class="panel2-right">{{detail.logistics}}</div>
            </div>
             <div class="detail-message-item">
                <div class="panel-left">备注</div>
                <div class="panel2-right">{{detail.sellerMemo}}</div>
            </div>
        </div> -->
         <div class="detail-message">
            <!-- <div class="detail-message-item2">
                <div class="panel-left">商品积分余额</div>
                <div class="panel-right2">{{detail.actualPrice}}</div>
            </div> -->
             <!--<div class="detail-message-item2">-->
                <!--<div class="panel-left">会员折扣</div>-->
                <!--<div class="panel-right2">-¥3.00</div>-->
            <!--</div>-->
             <!--<div class="detail-message-item2">-->
                <!--<div class="panel-left">运费</div>-->
                <!--<div class="panel-right2">¥ 10.00</div>-->
            <!--</div>-->
            <div class="detail-message-item3">
                <div class="panel-left"> 实付金额：{{detail.price}}</div>
                <div class="panel-right2"></div>
            </div>
        </div>
        <div  class="detail-bottom">
               
                <div class="cancel" v-if="detail.actionOrderStatus == 'WAIT_GET'" @click="handleConfirmGet(detail.orderCode)">确认收货</div>
                <div class="cancel" v-if="detail.actionOrderStatus=='EVALUATION'" @click="$router.push('/giveComment?code='+detail.orderCode+'&type=rmb')">评价</div>
                 <div v-if="detail.actionOrderStatus == 'WAIT_PAY'" class="remind-btn" @click="handleCancel(detail.orderCode)">取消</div>
                  <div v-if="detail.actionOrderStatus == 'WAIT_PAY'" class="remind-btn pay" @click="payBtn1">支付</div>
                <!-- <popup-picker v-if="detail.actionOrderStatus == 'WAIT_PAY'"  confirm-text="确定" class='remind-btn pay' title="支付" :data="list" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" ></popup-picker> -->
        </div>
        <div v-transfer-dom>
            <x-dialog v-model="showToast" class="dialog-demo">
                <x-input :max="6" label-width="1rem" title='密码' v-model="password" placeholder="请输入密码"></x-input>
                <div style="padding:15px;">
                <x-button @click.native="wxPay(detail.orderCode)" type="primary" medium>确认支付</x-button>
                </div>
            </x-dialog>
        </div>
        <div v-transfer-dom>
        <popup v-model="show1">
          <!-- group already has a top border, so we need to hide header's bottom border-->
          <popup-header
            left-text="取消"
            right-text="确认支付"
           title="请选择支付方式"
          :show-bottom-border="false"
          @on-click-left="show1 = false"
          @on-click-right="confrimBtn"></popup-header>
          <div class="select-wrap">
            <div @click="selectBtn(item)" v-for="(item,index) in list" :key="index" class="select-item box">
              <div class="select-item-name">{{item}}</div>
              <div class="icon-right">
                <icon v-if="selectVal == item" type="success"></icon>
                <icon v-if="selectVal != item" style="margin-right:.2rem;font-size: .4rem!important;" type="circle"></icon>
              </div>
            </div>
          </div>
        </popup>
      </div>
    </div>
</template>
<script>
import { XInput,XDialog,Popup,Icon,PopupHeader, TransferDomDirective as TransferDom } from "vux";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
    directives: {
        TransferDom
    },
    components: {
        XDialog,
        Popup,Icon,PopupHeader,
        XInput
    },
    methods:{
    },
    data() {
      return {
          list:['微信支付','支付宝支付（及时到账）'],
          value1:[],
          show1:false,
          password:'',
          showToast:false,
          completed: "",
          waitpay: "",
          waitsend: "",
          waitget: "",
          waitcomment: '',
          detail: {},
          selectVal:'微信支付',
	      hdItems: [{
		      label: "全部",
		      value: ""
	      },{
		      label: "待付款",
		      value: "WAIT_PAY"
	      },{
		      label: "待发货",
		      value: "WAIT_SEND-PART_SEND"
	      },{
		      label: "待收货",
		      value: "WAIT_GET"
	      },{
		      label: "待评价",
		      value: "EVALUATION"
	      },{
		      label: "已完成",
		      value: "COMPLETED"
	      },{
		      label: "已取消",
		      value: "CANCEL_USER"
	      },{
		      label: "已取消",
		      value: "CANCEL_ADMIN"
	      },{
		      label: "已取消",
		      value: "CANCEL_TIMEOUT"
	      }],
        auditStatusList: [{
          label: "待审核",
          value: "WAIT_AUDIT"
        },{
          label: "处理中",
          value: "IN_PROCESS"
        },{
          label: "售后成功",
          value: "SUCCESS"
        },{
          label: "售后失败",
          value: "FAILURE"
        }],
      }   
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        selectBtn(val){
            this.selectVal = val
        },
         confrimBtn(){
            if(this.selectVal == '微信支付'){
                this.wxPrepay()
            }else{
                this.zfbPrepay()
            }
            this.show1 = false
        },
        checkLog(logisticsCompany,logistics){
            this.$router.push({
                path:'/logisticsDetail',
                query:{
                    logisticsCompany,
                    logistics
                }
            })
        },
        zfbPrepay(){
            let url = `${CONSTANT.ORDER.orderZfbprepay}${this.detail.orderCode}?orderCode=${this.detail.orderCode}`;
            common.get(url, '', res => {
                if (res.code == 200) {
                    const div = document.createElement('div')
                    /* 此处form就是后台返回接收到的数据 */
                    div.innerHTML = res.data.bussData
                    document.body.appendChild(div)
                    document.forms[0].submit()
                } else {
                
                this.$vux.toast.show({
                    type: "cancel",
                    text: res.data.errMsg
                });
                }
            },(res)=>{
            });
            
        },
        leftBtn(){
            let url =`${location.origin}/wechat/actionOrderList`
            location.replace(url)
        },
     	getDetail() {
     		let url = CONSTANT.ORDER.ActionOrderDetail
            common.get(url, this.$route.query.code, (res) => {
            	if (res.code == 200) {
            		this.detail = res.data.bussData
                }
            })
        },
        payBtn1(){
            this.selectVal = '微信支付'
            this.show1 = true
        },
	    handleCancel() {
     		let url = CONSTANT.ORDER.actionCancel;
     		common.get(url, this.$route.query.code, (res) => {
     			if (res.code == 200) {
     				this.$vux.toast.show({
                        text: "取消成功"
                    })
			        this.getDetail()
                } else {
     				this.$vux.toast.show({
                        type: "warn",
                        text: res.data.errMsg
                    })
                }
            })
        },
	    linkTo(link){
		    this.$router.push(link)
        },
        payBtn(){
            this.wxPrepay()
        },
        wxPrepay(){
            let url = `${CONSTANT.ORDER.orderprepay}${this.detail.orderCode}?orderCode=${this.detail.orderCode}`;
            common.get(url, '', res => {
                if (res.code == 200) {
                    var bussData = res.data.bussData
                    let rejecturl = `${location.origin}/wechat/detailActionComplete?code=${this.detail.orderCode}`
                    let url = `${bussData.mwebUrl}&redirect_url=${encodeURIComponent(rejecturl)}`
                    location.replace(url)
                } else {
                
                    this.$vux.toast.show({
                        type: "cancel",
                        text: res.data.errMsg
                    });
                }
            },(res)=>{
            });
            
        },
        wxPay(order) {
            let url = `${CONSTANT.LIST.payOrder}`;
            common.post(url, {
                orderCode:order,
                pwd:this.password
            }, res => {
                this.$vux.loading.hide();
                this.showToast = false
                if (res.code == 200) {
                    this.$vux.toast.show({
                        type: "success",
                        text: '支付成功'
                    });
                    this.getDetail()
                } else {
                this.$vux.toast.show({
                    type: "cancel",
                    text: res.data.errMsg
                });
                }
            });
    },
      handleConfirmGet(code) {
        let url = CONSTANT.ORDER.actionConfrim;
        common.get(url, code, (res) => {
          if (res.code == 200) {
            this.$vux.toast.show({
              text: "确认收货成功"
            })
            this.getDetail()
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: res.data.errMsg
            })
          }
        })
      }
    }
}
</script>
<style lang="less">
.detail-complete{
    position: relative;
    height: 100%;
    background-color:#F6F6F6;
    .vux-popup-dialog{
  z-index: 100001;
}
.select-wrap{
  background-color: #fff;
  padding-left: .3rem;
  .select-item{
    height: 1rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .select-item-name{
      font-size: .34rem;
    }
    .icon-right{
      .weui-icon-success{
        color: #09BB07!important;
        font-size: .4rem!important;
        margin-right: .2rem;
      }
      .weui-icon-circle{
        color: #09BB07!important;
        font-size: .4rem!important;
        margin-right: .2rem;
      }
    }
  }
}
.disable {
  opacity: 0.3;
}
.weui-icon-checked{
  &:before{
    padding: .05rem;
    border-radius: 50%;
    border:1px solid #09BB07;
  }
}
    .arrow-left{
        position: absolute;
        left: .2rem;
        top: .2rem;
        height: .9rem;
        width: 1rem;
        z-index: 99;
        img{
        height: .4rem;
        width: .4rem;
        }
    }
    .weui-dialog{
        font-size: .32rem;
    }
    .weui-label, .weui-input{
        font-size: .32rem;
    }
    .detail-header{
        margin-bottom: .2rem;
        height:2.2rem;
        background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
        .dingdan-bg{
            width:7.5rem;
            height:2.2rem;
            z-index: 1;
            margin-bottom: 1.06rem;

        }
        .successword{
            position: absolute;
            left: .26rem;
            top: .65rem;
            z-index: 2;
            font-size:.26rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(254,254,254,1);

        }
        .detail-addr{
            position: absolute;
            top: 1.46rem;
            left: .24rem;
            img{
                width:7.02rem;
                height:1.6rem;
            }
            .detail-addr-container{
                position: absolute;
                top: .46rem;
                left: .25rem;
                .text-two{
                    display: flex;
                    align-items: center;
                    height:.22rem;
                    font-size:.28rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(34,34,34,1);
                    line-height:.22rem;
                    margin-bottom: .26rem;
                .text-name{
                    margin-right: .25rem;
                  
                }

                }
            .text-addr{
                font-size:.26rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);

            }

            }
        }

    }
    .detail-body{
        padding: 0 .26rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background-color: rgba(255,255,255,1);
        margin-bottom: .2rem;
        margin-top: 1rem;
        .code-complete{
            height:.88rem;
            background:rgba(255,255,255,1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: .01rem solid #EEEEEE;

            .code-complete-left{
                font-size:.28rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(51,51,51,1);
            }
            .code-complete-right{
                .code-complete-left;
                color:#FF7268;
            }
        }
        .detail-good{
            display: flex;
            align-items: center;
            flex-direction: row;
            padding: .29rem 0;
            border-bottom: .01rem solid #EEEEEE;

            img{
                width:2rem;
                height:2rem;
                margin-right: .32rem;

            }
            .detail-good-right{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                vertical-align: top;
                .right-text1{
                    vertical-align: top;
                    font-size:.3rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    margin-bottom: .28rem;
                    line-height: .32rem;

                }
                .right-text2{
                    font-size:.26rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(153,153,153,1);
                    margin-bottom: 0;
                    /*line-height: .25rem;*/
                }
                .good-refund {
                    text-align: right;
                    color: #fd2024;
                    font-size: .28rem;
                    font-weight: bold;
                }
                .right-text3{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .text3_1{
                        font-size:.2rem;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:#FF7268;

                    }
                .text3_2{
                    font-size:.26rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);
                }

                }

            }

        }
        .detail-good:nth-last-child(1){
            // border: none;

        }
        
        
    }
    .detail-message{
            padding: 0 .27rem 0 .24rem;
            background:rgba(255,255,255,1);
            display: flex;
            flex-direction: column;
            margin-bottom:.2rem; 
            .detail-message-item{
                box-sizing: border-box;
                width: 100%;
                background:rgba(255,255,255,1);
                min-height:.88rem;
                padding: .2rem 0;
                // display: flex;
                // flex-direction: row;
                // align-items: center;
                // justify-content: space-between;
                border-bottom: .01rem solid #EEEEEE;


                .panel-left{
                    font-size:.26rem;
                    float: left;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(102,102,102,1);
                    
                }
                .panel2-right{
                    float: right;
                    max-width: 5.5rem;
                    font-size:.28rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(85,85,85,1);
                    // text-align: right;
                    .btn-c{
                        width:1.56rem;
                        height:.6rem;
                        background:rgba(255,255,255,1);
                        border:.02rem solid #FF7268;
                        border-radius:.04rem;
                        // margin-right: .24rem;
                        font-size:.26rem;
                        font-family:PingFangSC-Regular;
                        font-weight:400;
                        color:#FF7268;
                        line-height:.6rem;
                        text-align: center;
                        position: relative;
                        top: -.1rem;
                    }
                }
             

            }
            .detail-message-item2{
                .detail-message-item;
                height: .8rem;
                border: none;
                .panel-right2{
                    font-size:.24rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                }

            }
            .detail-message-item3{
                .detail-message-item;
                justify-content: flex-end;
                  border: none;
                  .panel-left{
                      float: right;
                      margin-right: .3rem;

                  }
                  .panel-right{
                      .panel-left;
                      color:#FF7268;

                  }


            }
        .detail-message-item:nth-last-child(1){
            // border: none !important;

        }

    }
        .detail-bottom{
            height:.98rem;
            background:rgba(255,255,255,1);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .remind-btn{
                margin-right:.28rem;
                width:1.56rem;
                height:.5rem;
                color:#FF7268;
                border-radius: .04rem;
                text-align: center;
                line-height: .5rem;
                border:.02rem solid #FF7268;
                font-size:.26rem;
                .weui-cell__ft{
                    display: none;
                }
                .vux-popup-picker-value{
                    display: none;
                }
                .weui-label{
                    color:#FF7268!important;
                    font-size: 0.26rem!important;
                }
                .weui-cell{
                    padding: 0!important;
                    height:.5rem;
                    line-height: .5rem;
                    text-align: center;
                    .weui-cell__hd{
                        width: 100%;
                        margin: 0 auto;
                    }
                }
                &.pay{
                    background-color: #FF7268;
                    border: 0px;
                    color: #fff;
                    .weui-label{
                        color:#fff!important;
                    }
                }
            }
            .cancel{
                width:1.56rem;
                height:.6rem;
                background:rgba(255,255,255,1);
                border:.02rem solid #FF7268;
                border-radius:.04rem;
                margin-right: .24rem;
                font-size:.26rem;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:#FF7268;
                line-height:.6rem;
                text-align: center;

            }
            .connect{
                .cancel;
                background:rgba(126,86,198,1);
                color: #FFFFFF;
            }

        }

}
</style>
